/*
*@description: 个人中心
*@author: 作者
*@date: 2023-03-06 16:46:32
*@email: 邮箱
*/
<!--  -->
<template>
    <div class=''>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
                <span>个人中心</span>
            </div>
            <el-row :gutter="20">
                <el-col :span="24" :offset="0">
                    <div style="font-size:16px;font-weight:600;margin-bottom:15px;">个人信息</div>
                </el-col>
                <el-col :span="12" :offset="0" style="display:flex;">
                    <div style="line-height:50px;margin:0 10px 0 0;"> 头像:</div>
                    <el-image style="width: 50px; height: 50px;border-radius:50%;" :src="url">
                    </el-image>
                </el-col>
                <el-col :span="12" :offset="0" style="display:flex;line-height:50px;">
                    <div style="margin:0 10px 0 0;"> 昵称:</div>
                    <div>管理员</div>
                </el-col>
                <el-col :span="12" :offset="0" style="display:flex;line-height:50px;">
                    <div style="margin:0 10px 0 0;"> 姓名:</div>
                    <div>管理员</div>
                </el-col>
                <el-col :span="12" :offset="0" style="display:flex;line-height:50px;">
                    <div style="margin:0 10px 0 0;"> 邮箱:</div>
                    <div>nyyyx@163.com</div>
                </el-col>
                <el-col :span="12" :offset="0" style="display:flex;line-height:50px;">
                    <div style="margin:0 10px 0 0;"> 性别:</div>
                    <div>女</div>
                </el-col>
                <el-col :span="12" :offset="0" style="display:flex;line-height:50px;">
                    <div style="margin:0 10px 0 0;"> 电话:</div>
                    <div>15815791120</div>
                </el-col>
                <el-col :span="24" :offset="0" style="display:flex;line-height:50px;">
                    <div style="margin:0 10px 0 0;"> 地址:</div>
                    <div>--</div>
                </el-col>
                <el-col :span="24" :offset="0" style="display:flex;line-height:50px;">
                    <div style="margin:0 10px 0 0;"> 所属行业:</div>
                    <div>IT信息技术</div>
                </el-col>

            </el-row>
            <el-col :span="24" :offset="0">
                <div style="font-size:16px;font-weight:600;margin:15px 0;">账号设置</div>
            </el-col>
            <el-col :span="24" :offset="0" style="padding:0 0 20px 0;">
                <el-col :span="4" :offset="0">
                    <img src="https://qunka-oa-test.oss-cn-hangzhou.aliyuncs.com/%E6%89%8B%E6%9C%BA.png" alt="">
                </el-col>
                <el-col :span="8" :offset="0">
                    <div style="margin-top:10px;">
                        账号密码已设置完成
                    </div>
                    <div style="margin-top:5px;">
                        经常修改密码，可以提高账号安全性
                    </div>
                </el-col>
                <el-col :span="8" :offset="0">
                    <el-button size="small" type="primary" style="margin-top:20px;" @click="openDialog">修改密码</el-button>
                </el-col>
            </el-col>
            <el-col :span="24" :offset="0" />
        </el-card>
        <el-dialog title="修改密码" :visible.sync="dialogVisible" width="600px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-form-item label="新密码" prop="password">
                    <el-input prefix-icon="el-icon-lock" type="password" style="width:350px" v-model="ruleForm.password" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="再次输入密码" prop="passwordTwo">
                    <el-input prefix-icon="el-icon-lock" type="password" style="width:350px" v-model="ruleForm.passwordTwo" placeholder="请再次输入密码"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="close">取 消</el-button>
                <el-button size="small" type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                dialogVisible: false,
                url: require('@/assets/img/pic.jpg'),
                ruleForm: {
                    passwordTwo: '',
                    password: '',
                },
                rules: {
                    passwordTwo: [{ required: true, message: '请再次输入新密码', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入新密码', trigger: 'blur' }, { validator: this.validName, trigger: 'blur' }]
                },
            };
        },
        computed: {},
        created() {

        },
        methods: {
            openDialog() {
                this.dialogVisible = true
                this.$refs.ruleForm.resetFields()
            },
            //校验两次输入密码是否一致
            validName(rule, value, callback) {
                if (value != this.ruleForm.password) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            },
            //表单提交
            submit() {
                this.$refs['ruleForm'].validate((value) => {
                    if (value) {
                        this.$message.success('修改成功')
                        this.dialogVisible = false
                    }
                })
            },
            close() {
                this.$refs.ruleForm.resetFields()
                this.dialogVisible = false
            }
        },
    }
</script>
<style scoped>
</style>